<template>
  <view :class="$style.state_container">
    <view :class="$style.alert_label" class="flex flex-row">
      <view :class="$style.text"
        :style="item.dj == '1' ? 'background:rgba(55, 92, 228, 0.6)' : item.dj == '2' ? 'background:rgba(255, 152, 0, 0.6)' : item.dj == '3' ? 'background:rgba(255, 0, 32, 0.6)' : 'background:rgba(55, 92, 228, 0.6)'"
        v-for="(item, index) in props.stateInfo.gjc" :key="index">
        {{ item.gjc }}
      </view>
    </view>
    <view :class="$style.analysis_content" class="flex items-center">
      <view :class="$style.alert_property" class="flex-1">
        <view :class="$style.chartsBox">
          <qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
          <view :class="$style.group">
            <view :class="$style.number">{{ props.stateInfo.zyzs || 0 }}</view>
            <view :class="$style.text">难度指数</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { alertType, alertLevel } from "@/static";

interface Props {
  stateInfo: any;
}
const props = defineProps<Props>();

const stateInfo = watch(
  () => props.stateInfo,
  (newValue) => {
    console.log(newValue);
    getServerData()
  }
);
const compositeIndex = ref<number>(9.6);
const alertLabelList = ref<any>([
  { text: "中雨转小雨", color: "rgba(55, 92, 228, 0.6)" },
  { text: "高层", color: "rgba(255, 152, 0, 0.6)" },
  { text: "东风3-4级", color: "rgba(55, 92, 228, 0.6)" },
  { text: "报警5人次", color: "rgba(255, 0, 32, 0.6)" },
  { text: "九小场所", color: "rgba(255, 152, 0, 0.6)" },
  { text: "浓烟", color: "rgba(255, 0, 32, 0.6)" },
  { text: "爆炸", color: "rgba(255, 0, 32, 0.6)" },
  { text: "燃气", color: "rgba(255, 152, 0, 0.6)" },
  { text: "明火", color: "rgba(255, 152, 0, 0.6)" },
]);

const chartData = ref<object>({});
const zsmc = ref<any>([]);

function getServerData() {
  //模拟从服务器获取数据时的延时
  // setTimeout(() => {
  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
  let res = {
    categories: props.stateInfo.zsmc || ["抢险", "类别", "被困", "水源", "危险"],
    series: [
      {
        name: "成交量1",
        data: props.stateInfo.zssz || ["9.0", "10", "7.0", "7.5", "8.5"],
      },
      // {
      //   name: "成交量2",
      //   data: [190,210,105,35,27,102]
      // }
    ],
  };
  chartData.value = JSON.parse(JSON.stringify(res));
  // }, 500);

  console.log("chartData", chartData.value);
}
onMounted(() => {
  // setTimeout(() => {
  getServerData();
  // },5000)
});
const opts = ref<object>({
  fontSize: 10,
  fontColor: "#999999",
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  // padding: [5, 5, 5, 5],
  dataLabel: false,
  legend: {
    show: false,
    position: "right",
    lineHeight: 25,
  },

  extra: {
    radar: {
      gridType: "radar",
      gridColor: "#CCCCCC",
      gridCount: 3,
      opacity: 0.2,
      max: 10,
      border: true,
    },
  },
});
onMounted(() => { });

</script>

<style lang="less" module>
.state_container {
  min-height: 360rpx;
  width: calc(100% - 60rpx);
  box-sizing: border-box;
  background: #ffffff;
  overflow-x: hidden;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  border-radius: 20rpx;
  padding: 10rpx 10rpx 10rpx 20rpx;
  display: flex;

  .alert_label {
    flex-wrap: wrap;
    width: 350rpx;
    // height: 200rpx;
    font-size: 22rpx;
    // z-index: 9999;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;

    .text {
      height: 48rpx;
      padding: 5rpx 20rpx;
      border-radius: 28rpx;
      margin-left: 25rpx;
      margin-top: 10rpx;
      line-height: 48rpx;
      background: rgba(55, 92, 228, 0.6);
    }
  }

  .analysis_content {
    margin-top: 35rpx;
    padding-right: 10px;
    box-sizing: border-box;
    width: 300rpx;

    .hard {
      width: 100rpx;
      height: 100rpx;
      font-family: MicrosoftYaHei;

      // margin-left: 40rpx;
      .hard_number {
        color: #333333;
        font-size: 60rpx;
        font-weight: bold;
        text-align: center;
      }

      .hard_text {
        color: #999999;
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .alert_property {
      margin-left: 40rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      position: relative;

      .title {
        text-align: end;
        width: 120rpx;
        color: #333333;
        font-size: 24rpx;
      }

      .unit {
        margin-left: 20rpx;
        color: #999999;
        font-size: 20rpx;
      }

      .progress {
        width: 250rpx;
        margin-left: 15rpx;
      }
    }
  }

  .chartsBox {
    margin-left: -169rpx;
    overflow-x: hidden;
    width: 550rpx !important;
    height: 350rpx !important;

    // position: relative;
    .group {
      position: absolute;
      top: 120rpx;
      left: 15rpx;

      .number {
        width: 200rpx;
        text-align: center;
        font-size: 60rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #666;
        z-index: 999999;
      }

      .text {
        width: 200rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #666;
        z-index: 999999;
      }
    }

    canvas {
      // margin-left: 200rpx;
    }
  }
}
</style>
